import { FC, useEffect } from "react";
import { IconFont } from "../../../utils/iconfont/icon";
import styles from "./user.module.css";
import { Button, Radio, Spin } from "antd";
import { useDispatch } from "react-redux";
import { BrowserRouter, Route, Switch, useHistory } from "react-router-dom";
// import { Input } from "antd";
// import { SearchOutlined } from "@ant-design/icons";
import { useSelector } from "../../../redux/hooks";
import { getPlaylist, getUserDetail } from "../../../redux/userInfo/slice";
import {
  listDetailSlice,
  getListDetail,
  getlistDynamic,
} from "../../../redux/list/slice";
const User: FC = () => {
  const history = useHistory();
  const { data } = useSelector((s) => s.user);

  const { profile, level, playlists } = useSelector((s) => s.userDetail);
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(getPlaylist({ id: JSON.parse(data)["userId"] }));
    dispatch(getUserDetail({ id: JSON.parse(data)["userId"] }));
  }, []);

  return (
    <div className={styles.page}>
      {profile && playlists ? (
        <>
          {" "}
          <div className={styles.userInfo}>
            <img
              className={styles.avatarUrl}
              src={profile["avatarUrl"]}
              alt=""
            />
            <div className={styles.detail}>
              <div className={styles.detailtop}>
                <div className={styles.detailtop_left}>
                  <div className={styles.nickName}>
                    <div> {profile["nickname"]}</div>
                  </div>
                  <div className={styles.level}>
                    <span style={{ marginRight: "15px " }}>LV：{level}</span>{" "}
                    <span>{profile["gender"] === 1 ? "男" : "女"}</span>
                  </div>
                </div>
                <div className={styles.detailtop_right}>
                  <Button type="primary" shape="round" ghost>
                    编辑个人信息
                  </Button>
                </div>
              </div>{" "}
              <div className={styles.detailbotom}>
                <div className={styles.dongtai}>
                  <div className={styles.dongtaiFirst}>
                    <div className={styles.dongtaiNumber}>
                      {profile["sCount"]}
                    </div>
                    <div className={styles.font}>动态</div>
                  </div>
                  <div className={styles.dongtaiSecond}>
                    <div className={styles.dongtaiNumber}>
                      {profile["follows"]}
                    </div>
                    <div className={styles.font}>关注</div>
                  </div>
                  <div className={styles.dongtaiThird}>
                    <div className={styles.dongtaiNumber}>
                      {profile["followeds"]}
                    </div>
                    <div className={styles.font}>粉丝</div>
                  </div>
                </div>
                <div className={styles.others}>
                  所在地区：<span>海外 日本</span>
                </div>
                <div className={styles.others}>
                  社交网络： <span>微博</span>
                </div>
                <div className={styles.others}>
                  个人介绍：<span>{profile["signature"]}</span>
                </div>
              </div>
            </div>
          </div>
          <div className={styles.playListsContent}>
            <div
              className={styles.listTitle}
              onClick={() => {
                console.log(
                  playlists.filter(
                    (x) => x.creator.userId === profile["userId"]
                  )
                );
              }}
            >
              我创建的歌单 (
              {
                playlists.filter((x) => x.creator.userId === profile["userId"])
                  .length
              }
              )
            </div>
            <div className={styles.lists}>
              {playlists
                .filter((x) => x.creator.userId === profile["userId"])
                .map((y) => {
                  return (
                    <div className={styles.imgBox}>
                      <div>
                        {" "}
                        <IconFont
                          className={styles.listplay}
                          type="icon-listplay"
                        />{" "}
                      </div>
                      <div className={styles.playCount}>
                        <div className={styles.countContent}>{y.playCount}</div>{" "}
                      </div>
                      <img
                        onClick={() => {
                          console.log(y.id);
                          dispatch(getlistDynamic({ id: y.id }));
                          dispatch(getListDetail({ id: y.id }));
                          history.push(`/home/listDetail?listId=${y.id}`);
                        }}
                        className={styles.listCoverImg}
                        src={y.coverImgUrl}
                        alt=""
                      />
                      <div>
                        <div className={styles.listName}>
                          {y.name === profile["nickname"] + "喜欢的音乐" ? (
                            "我喜欢的音乐"
                          ) : (
                            <>{y.name}</>
                          )}
                        </div>
                        <div className={styles.listSongsCount}>
                          {y.trackCount}首
                        </div>
                      </div>
                    </div>
                  );
                })}
            </div>
          </div>{" "}
          <div className={styles.playListsContentShoucang}>
            <div
              className={styles.listTitle}
              onClick={() => {
                console.log(
                  playlists.filter(
                    (x) => x.creator.userId === profile["userId"]
                  )
                );
              }}
            >
              我收藏的歌单 (
              {
                playlists.filter((x) => x.creator.userId !== profile["userId"])
                  .length
              }
              )
            </div>
            <div className={styles.lists}>
              {playlists
                .filter((x) => x.creator.userId !== profile["userId"])
                .map((y) => {
                  return (
                    <div className={styles.imgBox}>
                      {" "}
                      <div className={styles.playCount}>
                        <div className={styles.countContent}>{y.playCount}</div>{" "}
                      </div>
                      <img
                        onClick={() => {
                          console.log(y.id);
                          dispatch(getlistDynamic({ id: y.id }));
                          dispatch(getListDetail({ id: y.id }));
                          history.push(`/home/listDetail?listId=${y.id}`);
                        }}
                        className={styles.listCoverImg}
                        src={y.coverImgUrl}
                        alt=""
                      />
                      <div>
                        <div className={styles.listName}>
                          {y.name === profile["nickname"] + "喜欢的音乐" ? (
                            "我喜欢的音乐"
                          ) : (
                            <>{y.name}</>
                          )}
                        </div>
                        <div className={styles.listSongsCount}>
                          {y.trackCount}首
                        </div>
                      </div>
                    </div>
                  );
                })}
            </div>
          </div>
        </>
      ) : (
        <>
          <Spin />
        </>
      )}
    </div>
  );
};

export default User;
